<template>
  <div class="vuex-container">
    <h1>vuex使用学习-顶级组件</h1>
    <div class="info">
      <h3>数据</h3>
      <ul>
        <li>name:{{ stateName }}</li>
        <li>age:{{ state.age }}</li>
        <li>friend:{{ state.friend }}</li>
      </ul>
    </div>
    <div class="content">
      <childrenA></childrenA>
      <childrenB></childrenB>
    </div>
  </div>
</template>

<script>
import childrenA from './childrenA'
import childrenB from './childrenB'
export default {
  name: 'vuex-root',
  components: {
    childrenA,
    childrenB
  },
  created () {
    console.log(this.$store.state)
  },
  computed: {
    state () {
      return this.$store.state
    },
    stateName () {
      return this.$store.state.name
    }
  }
}
</script>

<style lang="less">
html,
body {
  padding: 0;
  margin: 0;
}
.vuex-container {
  height: 100vh;
  background: skyblue;
  overflow: hidden;
  padding: 20px;
  h1 {
    margin: 20px;
    margin-top: 0;
    color: white;
  }
  .info {
    border: 1px solid #000;
    padding: 20px;
    border-radius: 10px;
    width: 400px;
    padding-top: 10px;
    cursor: pointer;
    h3 {
      margin: 0;
      margin-bottom: 20px;
    }
    li {
      margin-bottom: 10px;
      color: white;
      font-size: 20px;
      font-weight: 700px;
    }
  }
  .content {
    display: flex;
    padding: 20px;
    > div {
      border-radius: 40px;
    }
  }
}
</style>
